<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="/lib/layui/css/modules/laydate/default/laydate.css"  media="all">
  <link rel="stylesheet" href="/lib/layui/css/modules/layer/default/layer.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-col-xs6 layui-col-md8">
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>相关信息</legend>
  </fieldset>
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
      <li class="layui-this">借阅信息</li>
      <li>借阅本书的人还借过</li>
      <li>收藏本书的人还收藏过</li>
      <li>相关书评</li>
    </ul>
    <div class="layui-tab-content" style="height: 200px;">
      <div class="layui-tab-item layui-show">
        <table class="layui-table" lay-even="" lay-skin="nob">
          <tr>
            <td>登录号</td>
            <td>中图分类号</td>
            <td>状态</td>
          </tr>
          <tr th:each="i:${same}">
            <td th:text="${i.getId()}"></td>
            <td th:text="${i.getClassification()}"></td>
            <td th:text="${i.getBorrown()} == true?'已借出':'可借'"></td>
          </tr>
        </table>
      </div>
      <div class="layui-tab-item">
        <table class="layui-table" lay-even="" lay-skin="nob">
          <tr>
            <td>登录号</td>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>出版日期</td>
            <td>评分</td>
          </tr>
          <tr th:each="i:${sameBorrow}">
            <td th:text="${i.getId()}"></td>
            <td th:text="${i.getName()}"></td>
            <td th:text="${i.getAuthor()}"></td>
            <td th:text="${i.getPublishingHouse()}"></td>
            <td th:text="${i.getPublishDate()}"></td>
            <td th:text="${i.getScore()}"></td>
          </tr>
        </table>
      </div>
      <div class="layui-tab-item">
        <table class="layui-table" lay-even="" lay-skin="nob">
          <tr>
            <td>登录号</td>
            <td>书名</td>
            <td>作者</td>
            <td>出版社</td>
            <td>出版日期</td>
            <td>评分</td>
          </tr>
          <tr th:each="i:${sameStar}">
            <td th:text="${i.getId()}"></td>
            <td th:text="${i.getName()}"></td>
            <td th:text="${i.getAuthor()}"></td>
            <td th:text="${i.getPublishingHouse()}"></td>
            <td th:text="${i.getPublishDate()}"></td>
            <td th:text="${i.getScore()}"></td>
          </tr>
        </table>
      </div>
      <div class="layui-tab-item">
        <table class="layui-table" lay-even="" lay-skin="nob">
          <tr>
            <td>评论人</td>
            <td>评论内容</td>
            <td>评分</td>
          </tr>
          <tr th:each="i:${comment}">
            <td th:text="${i.getBorrowerName()}"></td>
            <td th:text="${i.getContent()}"></td>
            <td th:text="${i.getScore()}"></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>最新借阅信息</legend>
  </fieldset>
  <table class="layui-table" lay-even="" lay-skin="nob">
    <tr>
      <td>登录号</td>
      <td>借阅时间</td>
      <td>归还时间</td>
    </tr>
    <tr>
      <td th:text="${borrow?.getBookId()}"></td>
      <td th:text="${borrow?.getStart()}"></td>
      <td th:text="${borrow?.getEnd()}"></td>
    </tr>
  </table>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>预约信息</legend>
  </fieldset>
  <table class="layui-table" lay-even="" lay-skin="nob">
    <tr>
      <td>登录号</td>
      <td>预约时间</td>
      <td>预计归还时间</td>
    </tr>
    <tr th:each="k:${order}">
      <td th:text="${k.getBookId()}"></td>
      <td th:text="${k.getStartDate()}"></td>
      <td th:text="${k.getEndDate()}"></td>
    </tr>
  </table>
</div>
<div class="layui-col-xs6 layui-col-md4">
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>借阅</legend>
  </fieldset>
  <form class="layui-form" action="" >
    <div class="layui-form-item">
      <label class="layui-form-label">结束日期</label>
      <div class="layui-input-block">
        <input type="text" name="end" id="endB" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="renew">续借</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <input type="hidden" th:value="${borrow?.getBookId()}" id="bookId">
  <input type="hidden" th:value="${borrow?.getEnd()}" id="endDate">
  <input type="hidden" th:value="${newDate}" id="maxDate">
</div>
<script>
  layui.use(['form','laydate', 'layer'], function (){
    var laydate = layui.laydate,
            form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;
    form.render();
    laydate.render({
      elem: '#endB',
      min: document.getElementById('endDate').value,
      max: document.getElementById('maxDate').value
    });
    form.on('submit(renew)', function (data) {
      data = data.field;
      data['bookId'] = document.getElementById('bookId').value;
      data['oldEnd'] = document.getElementById('endDate').value;
      console.log(document.getElementById('bookId').value)
      $.ajax({
        url:"/renew",
        type:"POST",
        data:data,
        success:function (result){
          if (result.code==200){
            layer.msg("续借成功",{
              icon:6,
              time:500
            });
          }else {
            layer.open({
              type: 1
              ,offset: 'auto'
              ,id: 'layerDemo' //防止重复弹出
              ,content: '<div style="padding: 20px 100px;">'+ result.msg +'</div>'
              ,btn: '关闭'
              ,btnAlign: 'c' //按钮居中
              ,shade: 0 //不显示遮罩
            });
            //layer.msg(result.msg);
          }
        }
      });
      return false;
    });
    return false;
  })
</script>
</body>
</html>